<!DOCTYPE html PUBLIC "-//W3C//DTD XHMTL 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhmtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset="uft-8"/>
<title>节目时钟</title>
</head>
<body>
<canvas id="drawing" width="800" height="800" sytle="border:#000000 solid 1px">program clock</canvas>
<script>
    var min;
    var hour;
    var second;
    var offset =0;
    var drawing=document.getElementById("drawing");
	var context=drawing.getContext("2d");
	console.log("drawing's width is"+drawing.width);

	
    function drawClock(ctxt){
        
        if(drawing.getContext){
		    ctxt.strokeStyle="#000000";
			console.log("in drawClock,before draw arc"+context.strokeStyle);
            ctxt.beginPath();
		    ctxt.arc(400,400,399,0,2*Math.PI,false);

            ctxt.moveTo(790,400);
	        ctxt.arc(400,400,390,0,2*Math.PI,false);


            //draw 12 oclock
            ctxt.moveTo(400,10);
			console.log("in drawClock,before draw 12"+context.strokeStyle);
            ctxt.lineTo(400,20);

            //draw 3 oclock
            ctxt.moveTo(790,400);
            ctxt.lineTo(780,400);

            //draw 6 oclock
            ctxt.moveTo(400,790);
            ctxt.lineTo(400,780);

            //draw 9 oclock
            ctxt.moveTo(10,400);
            ctxt.lineTo(20,400);

		        ctxt.translate(400,400);

		        ctxt.font="bold 20px Arial";
		        ctxt.textAlign="center";
		        ctxt.textBaseline ="middle";
		        ctxt.fillText("12",0,-370);

           ctxt.stroke();
		   ctxt.closePath();

        } 		   
	}
  drawClock(context);
  setInterval("clock(context)",1000);
  //setTimeout("clock(context)",1000);
  
  function clearPreviousSecMinHour(ctxt,min,hour,second){
      ctxt.clearRect(0,0,800,800);
  }


 //  function drawMobilePhone(context,leftBottomX,leftBottomY){
    function drawMobilePhone(ctxt,leftBottomX,leftBottomY){ 

      var mobileWidth =  40;
      var mobileHeight = 80;
      ctxt.beginPath();
      ctxt.moveTo(leftBottomX,leftBottomY); 
	  ctxt.strokeStyle = "#000000"
	  console.log("in clock 5"+context.strokeStyle);
      ctxt.strokeRect(leftBottomX,leftBottomY,leftBottomX+mobileWidth,leftBottomY-mobileHeight);
	  ctxt.font="bold 20px Arial";
      ctxt.textAlign="center";
      ctxt.textBaseline ="middle";
	  ctxt.fillText("请关闭手机和Wifi，或调至静音和振动状态",leftBottomX+mobileWidth/2,leftBottomY-mobileHeight/2);
	  ctxt.stroke();
	  ctxt.closePath();
   }

    function drawSecond(ctxt,secd){
	   ctxt.beginPath();
	   ctxt.moveTo(0,0);
       ctxt.strokeStyle="#ff0000";
	   console.log("in clock 2"+context.strokeStyle);
       ctxt.lineTo(360*Math.sin(2*Math.PI*secd*6/360),-360*Math.cos(2*Math.PI*secd*6/360));
       ctxt.stroke();
	   ctxt.closePath();
	}

	function clock(ctxt){

       ctxt.translate(-400,-400);
       clearPreviousSecMinHour(ctxt,min,hour,second);
	   console.log("in clock 1:"+ctxt.strokeStyle);
       drawClock(ctxt);

  	   var d = new Date();
       min = d.getMinutes();
  	   hour = d.getHours();
       second = d.getSeconds();
        
	   drawSecond(context,second);	
          
		  
	   ctxt.beginPath();   
  	   ctxt.moveTo(0,0);
       ctxt.strokeStyle="#000000";
	   console.log("in clock 3"+context.strokeStyle);
       ctxt.lineTo(280*Math.sin(2*Math.PI*min*6/360),-280*Math.cos(2*Math.PI*min*6/360));
       ctxt.stroke();
	   ctxt.closePath();

       //draw Hour line
		   console.log(d.getHours());
	   ctxt.beginPath();
       ctxt.moveTo(0,0);
       ctxt.strokeStyle="#000000";
	   console.log("in clock 4"+context.strokeStyle);
       ctxt.lineTo(200*Math.sin(2*Math.PI*(hour*30+min*30/60)/360),-200*Math.cos(2*Math.PI*(hour*30+min*30/60)/360));
       ctxt.stroke();
       ctxt.closePath();  

      if( min === 51 ) {
         if(offset < 55 ) {
            offset = second;
            drawMobilePhone(context,-5+offset*150/55,5-offset*150/55);
         }
         if( offset > 55 ) {
             offset =55;
         }
	  }	 	 
		 
	}

</script>
</body>
</html>
